<template>
  <div>
    <van-tabs
      v-model="activeName"
      color='#409efe'
      animated
      >
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      </van-pull-refresh>
      <van-tab title="照片" name="a">
        <v-photo></v-photo>
      </van-tab>
      <van-tab title="图库" name="b">
        <v-library></v-library>
      </van-tab>
      <van-tab title="推荐" name="c">
        <v-recomment></v-recomment>
      </van-tab>
    </van-tabs>
    <van-tabbar
      v-model="active"
      active-color="#409efe"
      inactive-color="#7d7e80"
      :placeholder="true"
      fixed>
      <van-tabbar-item
        name="library"
        to="library"
        :icon="active=='library'?'photo':'photo-o'"
        replace
      >
        主页
      </van-tabbar-item>
      <van-tabbar-item
        name="center"
        to="center"
        :icon="active=='center'?'manager':'manager-o'"
        replace
      >
        个人中心
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import vLibrary from './components/library'
import vPhoto from './components/picture'
import vRecomment from './components/recomment'
export default {
  name: 'LibraryIndex',
  components: {
    vLibrary, vPhoto, vRecomment
  },
  data() {
    return {
      isLoading: false,
      active: 'library',
      activeName: 'a'
    }
  },
  created() {
    var urlData = this.$route.query
    this.activeName = urlData.activeName
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        // this.getData()
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-tabs{
  .van-tabs__wrap{
    position: fixed;
    width: 100%;
    top: 0;
    background: #fff;
    z-index: 500;
    padding-bottom: 0.5rem;
  }
  .van-tabs__track{
  margin-top: 1.6rem;
  }
}

</style>
